<template>
  <div class="p-25px flex items-start" @click="handleRead">
    <el-badge is-dot :offset="[-10, 0]" :hidden="props.data.readStatus">
      <img
        src="/svg/notice-card-icon.svg"
        class="w-48px h-48px mr-14px"
        alt=""
      />
    </el-badge>

    <div class="flex-1 flex flex-col">
      <div class="flex items-center">
        <h4 class="font-size-18px text-default fw-400 mr-16px">
          【{{ typeText }}】
        </h4>
        <span class="font-size-14px text-light"
          >时间：{{ props.data.createTime?.slice(0, 16) }}</span
        >
      </div>
      <div class="item-content mt-10px text-light lh-23px">
        {{ props.data.noticeTitle }}
      </div>
    </div>
    <!-- <router-link to="/" class="detail-btn">查看详情</router-link> -->
  </div>
</template>

<script setup>
import { useUserStore } from "@/store";
const props = defineProps({
  data: Object,
});

const typeText = computed(() =>
  props.data.noticeType === 1 ? "通知消息" : "公告消息"
);

const userStore = useUserStore();
const $api = inject("$api");
const handleRead = async () => {
  if (props.data.readStatus) return;
  await $api.news.readNotice(props.data.noticeId);
  props.data.readStatus = 1;
  --userStore.unreadNum[props.data.noticeType === 1 ? "notice" : "inform"];
};
</script>

<style lang="less" scoped>
.item-content {
  .multiline-overflow(2);
}
.detail-btn {
  align-self: center;
  display: inline-flex;
  margin-left: 44px;
  border-radius: 2px;
  padding: 5px 20px;
  font-size: 14px;
  line-height: 22px;
  color: #606266;
  background: #f2f3f5;
  &:hover {
    background: #e5f0ff;
    color: @main-color;
  }
}
</style>
